<template>
	<view class="">
		<view class="">
			<image src="" mode=""></image>
		</view>
		<view class="">
			<!-- 登录 -->
			<view class="">
				<view class="nav">
					<view class="nav-l"  @click="active2(1)">
						登录
					</view>
					<view class="nav-r"  @click="active2(2)">
						注册
					</view>
				</view>
				<!-- 登录 -->
				<view class=""  v-show="active">
					<input type="text" value="" placeholder="请输入手机号码" />
					<input type="text" value="" placeholder="请输入验证码" />
				</view>
				<!-- 注册 -->
				<view class=""  v-show="!active">
					<input type="text" value=""  placeholder="请输入邀请码(选填)"/>
					<input type="text" value="" placeholder="请输入手机号码" />
					<input type="text" value="" placeholder="请输入验证码" />
				</view>
			</view>
			<view class="txt" >
				<text>
					获取短信验证码
				</text>
			</view>
		</view>
		<view class="bot">
			<label>
				<checkbox :value="tive" /><text>我已阅读并同意</text>
				
			</label>
			<view class="">
				《合作协议》和《隐私协议》
			</view>
		</view>
		<view class="" @click="gointe">
			<button type="default">立即注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "index",
		data() {
			return {
				active: true,
				tive:''
			}
		},
		onLoad() {

		},
		methods: {
			// 切换注册登录
			active2(id){
				if(id == 1)this.active = true 
				else this.active = false
			},
			gomenu(e) {
				console.log(e)
				uni.navigateTo({
					url: "/pages/index/menu"
				})
			},
			gointe(e) {
				console.log(e)
				uni.navigateTo({
					url: "/pages/index/inte"
				})
			},
			
		}
	}
</script>

<style scoped>
	.bot{
		width: 60%;
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	.txt{
		text-align: right;
		width: 500rpx;
		margin: 40rpx auto;
		text-align: right;
		color: #007AFF;
		
	}
	text{
		border-bottom: 1rpx solid;
	}
	.nav-l {
		width: 160rpx;
		/* border: 1rpx solid; */
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
	}

	.nav-r {
		width: 160rpx;
		/* border: 1rpx solid; */
		text-align: center;
		margin: 0rpx 0 0 10rpx;
		height: 50rpx;
		line-height: 50rpx;
		/* background-color: #007AFF; */
		background-image: linear-gradient(to right, rgb(53, 199, 233), rgb(30, 141, 255));
		border-radius: 50rpx;
	}

	.nav {
		display: flex;
		justify-content: center;
		width: 322rpx;
		margin: 40rpx auto;
		border: 1rpx solid;
		border-radius: 40rpx ;
	}

	input {
		border: 1rpx solid;
		width: 70%;
		margin: 40rpx auto;
		height: 60rpx;
		border: none;
		border-bottom: 1rpx solid #a5a5a5;
	}
</style>
